<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import http from '@/api/api.ts'
import { mainStore } from '@/store/index.ts';

const {playAudio} = mainStore()

interface IBanner {
    imageUrl: string; // https://swiperjs.com/demos/images/nature-1.jpg
    targetId: number;
    [propName: string]: any;     // 其他任意属性
}
let banners = ref<IBanner[]>([]);
onMounted(async () => {
    let { data } = await http.get<{ data: IBanner[] }>('/banners');
    console.log('banner list:', data);
    banners.value = data;
});

function playHandle(id: number) {
    playAudio(id);
}

</script>

<template>
    <div>
        <Swiper slides-per-view="auto" :space-between="50" :pagination="{ clickable: true }">
            <SwiperSlide v-for="v in banners" :key="v.targetId">
                <img :src="v.imageUrl" class="banner-image" @click="playHandle(v.targetId)" />
            </SwiperSlide>
        </Swiper>
    </div>
</template>

<style scoped>
.banner-image {
    border-radius: 5px;
    width: 100%;
    height: 100%;
}
</style>